import React from 'react';
import { Button, Table, Modal, message, Spin } from 'antd';
import { connect } from 'react-redux';
import { formatUtcTime } from 'Utils/index';
import Api from 'Utils/api';
import * as routerActions from 'react-router-redux';
import CommonBg from 'Page/DispatchPage/Components/CommonBorder';

const PAGE_SIZE = 5;
const confirm = Modal.confirm;
class TypicalDispatch extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      dataCount: 0,
      data: [],
      listPage: 1,
      isLoading: true,
    };
    this.condition = { offset: 0, limit: PAGE_SIZE };
    this.onDetail = ::this.onDetail;
    this.onAdd = ::this.onAdd;
    this.onDelete = ::this.onDelete;
    this.onEdit = ::this.onEdit;
  }
  componentDidMount() {
    this.initList();
  }
  initList() {
    const api = new Api({
      method: 'GET',
      path: '/cases',
      query: { ...this.condition },
      success: (json) => {
        this.setState({ isLoading: false, listPage: ((this.condition.offset / PAGE_SIZE) + 1), data: json.data_list, dataCount: json.total_count });
      },
      error: (msg) => {
        this.setState({
          isLoading: false
        });
        message.error(msg);
      }
    });
    api.run();
  }
  generatorColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '案例名称',
        dataIndex: 'case_name',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '任务内容',
        dataIndex: 'task_content',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '任务时间',
        dataIndex: 'task_time',
        render: text => (
          <span >{formatUtcTime(text)}</span >
        )
      },
      {
        title: '操作',
        dataIndex: 'operate',
        render: (text, record) => (
          <span className="operate">
            <span className="see" onClick={this.onDetail.bind(this, record.id)}>查看</span >
            <span className="edit" onClick={this.onEdit.bind(this, record.id)}>编辑</span >
            <span className="delete" onClick={this.onDelete.bind(this, record)}>删除</span >
          </span>
        )
      },
    ];
  }
  onDetail(id) {
    this.props.dispatch(routerActions.push(`/system/dispatch/support/typical_case/detail/${id}`));
  }
  onAdd() {
    this.props.dispatch(routerActions.push('/system/dispatch/support/typical_case/add'));
  }
  onEdit(id) {
    this.props.dispatch(routerActions.push(`/system/dispatch/support/typical_case/edit/${id}`));
  }
  onListPageChange(page) {
    this.setState({ listPage: page, isLoading: true }, this.initList.bind(this));
    this.condition.offset = (page - 1) * PAGE_SIZE;
  }
  onDelete(record) {
    const self = this;
    confirm({
      title: '删除',
      content: '确定删除该典型案例吗？',
      onOk() {
        self.setState({
          isLoading: true,
        });
        const deleteApi = new Api({
          method: 'DELETE',
          path: `/cases/${record.id}`,
          success: () => {
            self.initList();
          },
          error: (msg) => {
            message.error(msg);
          }
        });
        deleteApi.run();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <CommonBg
        btn={<Button onClick={this.onAdd.bind(this)}>
          <img src="images/page/icon_add.png" alt="" />
          新增
        </Button>}
        content={
          <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
            <Table
              rowid={record => record.id}
              columns={columns}
              bordered
              dataSource={this.state.data}
              pagination={{
                pageSize: PAGE_SIZE,
                total: this.state.dataCount,
                current: this.state.listPage,
                onChange: this.onListPageChange.bind(this)
              }}
            />
          </Spin>
        }
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.mapReducer
  };
}

export default connect(mapStateToProps)(TypicalDispatch);
